<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>首页</title>
    <head th:include="include :: header"></head>
    <style type="text/css">
        html, body{width:100%; height:100%; margin:0; padding:0;background: #f0f2f5; }
        .query-form{padding:10px 0 0 10px; background-color: #ffffff;}
        .table-wrapper{background:#FFFFFF; margin-top:10px; padding:10px;}
        .table-content{margin-top:10px;}
        .table-pagination{margin-top: 10px;}
    </style>
</head>

<#list table.fields as field>
    <#if field.keyFlag><#--生成主键排在第一位-->
        <#assign pkName = field.propertyName>
        <#assign pkType = field.propertyType>
    </#if>
</#list>

<body>
<div id="app">
    <el-form class="query-form" :model="queryForm.data" ref="queryForm" :inline="true" size="small">
        <#list table.fields as field>
            <#if field.keyFlag>
            <#-- 主键 -->
            <#-- 普通字段 private ${field.propertyType} ${field.propertyName}; -->
            <#else>
                <el-form-item label="${field.comment}" prop="${field.propertyName}">
                    <el-input v-model="queryForm.data.${field.propertyName}"></el-input>
                </el-form-item>
            </#if>
        </#list>
        <el-form-item>
            <el-button type="primary" @click="onQueryFormQueryBtnClick">查询</el-button>
            <el-button @click="onQueryFormResetBtnClick">重置</el-button>
        </el-form-item>
    </el-form>

    <el-row class="table-wrapper">
        <el-col :span="24" class="table-btn-group">
            <el-button icon="el-icon-edit" size="small" type="primary" @click="onTableCreateBtnClick">创建</el-button>
            <el-button icon="el-icon-delete" size="small" type="danger" @click="onTableDeleteBtnClick">删除</el-button>
        </el-col>
        <el-col :span="24" class="table-content">
            <el-table :data="table.records" :row-key="table.records.${pkName}" v-loading="table.loading" stripe
                      :style="style.table" height="'300'" size="mini" border @selection-change="onTableSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <#list table.fields as field>
                <#-- 主键 -->
                    <#if field.keyFlag>
                    <#-- 普通字段 private ${field.propertyType} ${field.propertyName}; -->
                    <#else>
                        <el-table-column prop="${field.propertyName}" label="${field.comment}"></el-table-column>
                    </#if>
                </#list>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="onTableRowDetailBtnClick(scope.$index, scope.row)">详情</el-button>
                        <el-button type="text" size="mini" @click="onTableRowEditBtnClick(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" style="color:#f78989" @click="onTableRowDeleteBtnClick(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="24" class="table-pagination">
            <head th:include="include :: pagination"></head>

        </el-col>
    </el-row>

    <el-dialog :visible.sync="formDialog.visible" width="30%" :close-on-click-modal="false">
        <el-form :model="formDialog.form" :rules="formDialog.formRules" ref="formDialog" :disabled="formDialog.disabled" size="mini">
            <#list table.fields as field>
                <#-- 主键 -->
                <#if field.keyFlag>
                <#-- 普通字段 private ${field.propertyType} ${field.propertyName}; -->
                <#else>
                    <el-form-item prop='${field.propertyName}' label="${field.comment}：" :label-width="style.formLabelWidth">
                        <el-input v-model="formDialog.form.${field.propertyName}" autocomplete="off"></el-input>
                    </el-form-item>
                </#if>
            </#list>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onFormDialogCancelClick" size="mini">取 消</el-button>
            <el-button type="primary" @click="onFormDialogSubmitClick" size="mini">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script type="text/javascript" th:src="@{/${cfg.moduleName}/script/${entity?uncap_first}.js}"></script>
</body>
</html>
